<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="查询.css"/>


    <style type="text/css">

        .shadow_css {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 10;
            /* 为mozilla firefox 设置透明度  */
            -moz-opacity: 0.6;
            /* 设置透明度 */
            opacity: .60;
            /* 为IE 设置透明度  */
            filter: alpha(opacity=66);
        }

        .window_css {
            display: none;
            position: absolute;
            top: 20%;
            left: 25%;
            width: 50%;
            height: 60%;
            border: 3px solid honeydew;
            background-color: aliceblue;
            z-index: 11;
            background-color: #6e5a6e;
        }
    </style>
    <script>
        /*当点击调用此方法后,将悬浮窗口显示出来,背景变暗*/
        function displayWindow() {
            /*悬浮窗口的显示,需要将display变成block*/
            document.getElementById("window").style.display = "block";
            /*将背景变暗*/
            document.getElementById("shadow").style.display = "block";
        }

        /*当点击调用此方法,将悬浮窗口和背景全部隐藏*/
        function hideWindow() {
            document.getElementById("window").style.display = "none";
            document.getElementById("shadow").style.display = "none";
        }
    </script>
</head>
<body>
        <div id="login">
            <h1>Login</h1>

<!--            当然   loginServletTest 就是后端写的servlet  传入name，pssword-->
                <form method="post" action="loginServletTest">
                    <input type="text" required="required" placeholder="用户名" name="name"></input>
                    <input type="password" required="required" placeholder="密码" name="password"></input>
                    <button class="but" type="submit">登录</button>
                    <button class="but-less" type="submit"  href="javascript:void(0)" onclick="displayWindow()">注册用户</button>
                    <button class="but-less" type="submit"  href="javascript:void(0)" onclick="displayWindow()">注册用户</button>
                </form>
        </div>





        <!--用来引出悬浮窗口的div-->
<!--        <div>-->
<!--            <a href="javascript:void(0)" onclick="displayWindow()">-->
<!--                点击显示悬浮窗口-->
<!--            </a>-->
<!--        </div>-->
<!--        &lt;!&ndash;悬浮窗口&ndash;&gt;-->




        <div id="window" class="window_css">
            <div id="login1">
                <h1>注册用户</h1>
                <form method="post" action="userRegistered">
                    <input type="text" required="required" placeholder="注册用户名" name="nameRegister"></input>
                    <input type="password" required="required" placeholder="密码" name="passwordRegisterFirst"></input>
                    <input type="password" required="required" placeholder="密码" name="passwordRegisterSecond"></input>
                    <button class="but" type="submit">登录</button>
                </form>
            </div>

            <a href="javascript:void(0)" onclick="hideWindow()">
            关闭悬浮窗口
            </a>
        </div>



        <!--出现悬浮窗口后,背景变暗-->
        <div id="shadow" class="shadow_css">

        </div>


</body>
</html>


